<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-99" :style="{'paddingTop':$store.state.statusBarHeight+'px','top':'0'}">
			<view class="title">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30"></text></view>
				<text>{{title}}</text>
			</view>
			<view class="pb-2 tab" style="background: #fbfbfb;">
				<view class="d-flex d-flex-middle mt-2 ml-2">
					<view @click="changeTab(dex)" style="width: 150rpx;" class="text-center" :class="currentTab === dex? 'currentTabSty' : ''" v-for="(tab, dex) in TabList" :key="tab">{{tab}}</view>
				</view>
				<view class="rounded15" :style="[{transform: 'translate('+DistanceX+'rpx)'}]" style="margin-left: 52rpx; width: 88rpx; height: 6rpx; background: #2da3de; margin-top: 6px; transition: transform 0.3s ease;"></view>
			</view>
		</view>
		<swiper class="swiper" :current="currentTab" duration="300" @animationfinish="onAnimationfinish" :style="[{minHeight: 'calc(100vh - ' + PaddingTop + 'px)'},{paddingTop: PaddingTop + 'px'},{height: swiperHeight + 'px'}]">
			<swiper-item>
				<view class="swiper-item0">
					<view class="ml-2 mb-2">
						<view class="color87 mt-4 font24">2024年09月</view>
						<view class="d-flex mt-2">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/securityCenter.png" class="rounded10 mr-2" style="width: 350rpx; height: 190rpx;"></image>
							<view class="d-flex d-flex-column">
								<view class="mr-4 font-500 mt-3" style="word-break: break-all">违规行为处罚通告2024.09.09~2024.09.15</view>
								<view class="color87 font24 mt-2">09月20日</view>
							</view>
						</view>
						<view class="d-flex mt-2">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/securityCenter.png" class="rounded10 mr-2" style="width: 350rpx; height: 190rpx;"></image>
							<view class="d-flex d-flex-column">
								<view class="mr-4 font-500 mt-3" style="word-break: break-all">违规行为处罚通告2024.09.02~2024.09.08</view>
								<view class="color87 font24 mt-2">09月14日</view>
							</view>
						</view>
						<view class="d-flex mt-2">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/securityCenter.png" class="rounded10 mr-2" style="width: 350rpx; height: 190rpx;"></image>
							<view class="d-flex d-flex-column">
								<view class="mr-4 font-500 mt-3" style="word-break: break-all">违规行为处罚通告2024.08.26~2024.09.1</view>
								<view class="color87 font24 mt-2">09月14日</view>
							</view>
						</view>
					</view>
					<view class="ml-2 mb-2">
						<view class="color87 mt-4 font24">2024年08月</view>
						<view class="d-flex mt-2">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/securityCenter.png" class="rounded10 mr-2" style="width: 350rpx; height: 190rpx;"></image>
							<view class="d-flex d-flex-column">
								<view class="mr-4 font-500 mt-3" style="word-break: break-all">违规行为处罚通告2024.08.19~2024.08.25</view>
								<view class="color87 font24 mt-2">08月28日</view>
							</view>
						</view>
						<view class="d-flex mt-2">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/securityCenter.png" class="rounded10 mr-2" style="width: 350rpx; height: 190rpx;"></image>
							<view class="d-flex d-flex-column">
								<view class="mr-4 font-500 mt-3" style="word-break: break-all">违规行为处罚通告2024.08.12~2024.08.18</view>
								<view class="color87 font24 mt-2">08月22日</view>
							</view>
						</view>
					</view>
					<view class="ml-2 mb-5">
						<view class="color87 mt-4 font24">2024年07月</view>
						<view class="d-flex mt-2">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/securityCenter.png" class="rounded10 mr-2" style="width: 350rpx; height: 190rpx;"></image>
							<view class="d-flex d-flex-column">
								<view class="mr-4 font-500 mt-3" style="word-break: break-all">违规行为处罚通告2024.08.19~2024.08.25</view>
								<view class="color87 font24 mt-2">07月28日</view>
							</view>
						</view>
						<view class="d-flex mt-2">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/securityCenter.png" class="rounded10 mr-2" style="width: 350rpx; height: 190rpx;"></image>
							<view class="d-flex d-flex-column">
								<view class="mr-4 font-500 mt-3" style="word-break: break-all">违规行为处罚通告2024.08.12~2024.08.18</view>
								<view class="color87 font24 mt-2">07月22日</view>
							</view>
						</view>
					</view>
					<view class="ml-2 pb-6">
						<view class="color87 mt-4 font24">2024年06月</view>
						<view class="d-flex mt-2">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/securityCenter.png" class="rounded10 mr-2" style="width: 350rpx; height: 190rpx;"></image>
							<view class="d-flex d-flex-column">
								<view class="mr-4 font-500 mt-3" style="word-break: break-all">违规行为处罚通告2024.08.19~2024.08.25</view>
								<view class="color87 font24 mt-2">06月28日</view>
							</view>
						</view>
						<view class="d-flex mt-2">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/securityCenter.png" class="rounded10 mr-2" style="width: 350rpx; height: 190rpx;"></image>
							<view class="d-flex d-flex-column">
								<view class="mr-4 font-500 mt-3" style="word-break: break-all">违规行为处罚通告2024.08.12~2024.08.18</view>
								<view class="color87 font24 mt-2">06月22日</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item1 text-center mt-4">
					净网通告
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item2 text-center mt-4">
					平台规则
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				title: "安全中心",
				DistanceX: 0,
				currentTab: 0,
				PaddingTop: 120,
				swiperHeight: 0,
				TabList:['平台公告','净网通告','平台规则']
			}
		},
		onLoad(opt) {
			this.setPaddingTop()
			this.setSwiperHeight()
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 切换tab栏
			changeTab(dex) {
				if(dex === this.currentTab) {
					return
				}
				this.currentTab = dex
				this.DistanceX = this.currentTab * 150
				this.setSwiperHeight()
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			// swiper动画执行完后的动作
			onAnimationfinish(event) {
				this.changeTab(event.detail.current)
			},
			// 设置上边距
			setPaddingTop() {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.content').boundingClientRect(data => {
						this.PaddingTop = data.height + data.top
					}).exec()
				}, 300)
			},
			// 设置轮播图高度
			setSwiperHeight() {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.swiper-item'+this.currentTab).boundingClientRect(data => {
						this.swiperHeight = data.height
					}).exec()
				}, 100)
			},
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fbfbfb;
	overflow: hidden;
	.currentTabSty {
		font-weight: bold;
	}
	.content {
		width: 100%;
		background-color: #fbfbfb !important;
		.title {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding-right: 47rpx;
			text {
				flex: 1;
				font-size: 32rpx;
				text-align: center;
				font-weight: normal;
			}
		}
	}
	.z-index-99 {
		z-index: 99;
	}
	.color87 {
		color: #878787;
	}
}
</style>